<html>
<head>

    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.meter.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A sketchy Meter chart</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A sketchy Meter chart using a background image as well as a needle image" />
</head>
<body>
    
    <h1>A sketchy (interactive) Meter chart with background and needle images</h1>


    <canvas id="cvs" width="237" height="196" !style="border: 1px solid #ccc">[No canvas support]</canvas>

    <script>
        meter = new RGraph.Meter({
            id: 'cvs',
            min: 0,
            max: 10,
            value: 8,
            options: {
                centerx: 116,
                centery: 136,
                background: {
                    color: 'rgba(0,0,0,0)',
                    image: {
                        url: '/images/meter-sketch.png',
                        stretch: false,
                        offsetx: 5,
                        offsety: 6
                    }
                },
                needle: {
                    color: 'rgba(0,0,0,0)',
                    image: {
                        url: '/images/meter-sketch-needle.png',
                        offsetx: -5,
                        offsety: -5
                    }
                },
                colors: {
                    ranges: []
                },
                'tickmarks.big.num': 0,
                'tickmarks.small.num': 0,
                border: false,
                labels: false,
                centerpin: {
                    stroke: 'rgba(0,0,0,0)',
                    fill: 'rgba(0,0,0,0)'
                },
                angles: {
                    start: 2.7,
                    end: 6.52
                }
            }
        }).draw()
        
        meter.canvas.onclick = function (e)
        {
            var value = meter.getValue(e);
        
            if (typeof value === 'number') {
                meter.value = value;
                meter.grow();
            }
        }
        
    </script>
</body>
</html>